<template>
<!-- 测试使用,可以用来备用 -->
  <div id="cesCon">
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="btnTable"
      stripe
      style="width: 100%"
      height="700"
      
    >
      <el-table-column prop="date" label="测试日期" width="140"> </el-table-column>
      <el-table-column prop="name" label="测试姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="测试地址"> </el-table-column>
      <el-table-column prop="imgUrl" label="测试图片">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img :src="scope.row.imgUrl" style="width: 150px; height: 150px" />
            <img
              slot="reference"
              :src="scope.row.imgUrl"
              style="width: 30px; height: 30px"
            />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    const item = {
      date: '2000-11-02',
      name: 'Starry',
      address: '安徽省合肥市蜀山区',
      imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F05%2F20210305171825_2d61a.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649992479&t=60b3937f1afb79c80ef52086217236ec"
    };
    return {
      tableData: Array(20).fill(item),
      loading: false
    }
  },
  methods:{
  }
};
</script>

<style>
</style>